<template>
    <div  class="topNavArr">
        <div ref="topNavs" class="topNavs" :style="{width:barWidth}">
            <div class="topNavaArrItem" :class="{active:id == nowId}" @click="onNav(item.id,id)" v-for="(item,id) in topNav" :key="id">
              <span :ref="'item'+id">{{item.name}}</span>
            </div>
            <div ref="topBottomLine" :style="{left: offsetL +'px',width: itemW+'px'}" class="topBottomLines"></div>
        </div>
    </div>
</template>
<script>
//  dataArr 需要的
export default {
  name: "topBarSel",
  props: {
    topNav: {
      type: Array,
      require: true
    },
    barWidth: {
      type: String,
      default: "67%"
    }
  },
  data() {
    return {
      nowId: 0,
      offsetL: 0, //  子组件相对父组件偏移量
      itemW: 0 // 子组件宽度
    };
  },
  mounted() {
    this.onNav("1", 0);
  },
  methods: {
    onNav(itemId, id) {
      this.nowId = id;
      var itemW = this.$refs["item" + id][0].offsetWidth - 40;
      var itemL = this.$refs["item" + id][0].offsetLeft + 20; // 当前元素距离父节点的左边 水平距离 ,距离父节点的偏移量
      this.$set(this, "offsetL", itemL);
      this.$set(this, "itemW", itemW);
      this.$emit("changeTab", itemId);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/bossVersion/_basics";

.topBottomLines {
  bottom: 0.04rem;
  transition: left 0.5s;
  left: 0;
  height: 0.03rem;
  background: $color1;
  position: absolute;
}
.topNavs {
  @include flexXjsbYcen;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 0.4rem;
  background-color: rgba(#000, 0.3);
}
.topNavaArrItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: calc(100% / 3);
  height: 0.4rem;
  cursor: pointer;
  & > span {
    color: $color6;
    font-size: 0.15rem;
  }
}
.active {
  & > span {
    color: $color1;
  }
}
</style>
